<!--
 * @Author: egg1bro
 * @Date: 2022-12-24 14:22:33
 * @LastEditTime: 2023-01-11 14:00:19
 * @LastEditors: egg1bro
 * @Description: <
 * @FilePath: \team-graduation-design\src\views\Login\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="nav">
        <van-nav-bar left-text="游客模式" right-text="客服" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />
        <h1>登录</h1>
    </div>

    <div class="form">
        <van-form @submit="onSubmit">
            <!-- 账号密码框 -->
            <van-cell-group inset>
                <van-field v-model="username" clearable type="" name="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" :type="!passwordType ? 'password' : 'text'"
                    :right-icon="!passwordType ? 'closed-eye' : 'eye'" name="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" @click-right-icon='passwordType = !passwordType'>

                </van-field>

            </van-cell-group>
            <!-- 勾选框 -->
            <van-field name="checkbox">
                <template #input>
                    <van-checkbox v-model="checked" shape="square" icon-size="15px">
                    </van-checkbox>
                    <div class="d1">我已经阅读并同意学习通 <a @click="showDialog">《登录政策》</a> 和 <a @click="showDialog">《用户协议》</a>
                    </div>
                </template>
            </van-field>




            <!-- 登录按钮 -->
            <div class="lgbtn">
                <van-button square block type="primary" native-type="submit" :disabled="checked == true ? false : true"
                    @click="goHome">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>

    <section class="s1">
        <div class="left"> <router-link to="/register">新用户注册</router-link></div>
        <div class="right"><router-link to="/loginSms">手机号快捷登录</router-link></div>
    </section>

    <!-- dialog -->
    <van-dialog v-model:show="show" message-align="left" title="使用协议与隐私政策" show-cancel-button @confirm="onConfirm"
        :message="message">

    </van-dialog>


    <div class="bottom-center"><a href="#">其他登陆方式</a></div>


</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/login'
// 实例化路由
const router = useRouter()
// 实例化仓库
const loginStore = useLoginStore()
const { getUserLoginInfo } = loginStore

const username = ref('');
const password = ref('');
// 切换密码框属性状态
const passwordType = ref(false)
// 勾选框
const checked = ref(false);

// 使用 ref 创建可响应的变量
const show = ref(false);
// dialog 里 message的值
const message = `欢迎使用“学习通”提供的产品和服务！       
                 为了更透明的呈现数字学院收集和使用您的个人信息的情况，数字学院根据业务实际情况更新了协议;特向您推送本提示。`
// 定义方法
const showDialog = () => {
    show.value = true;
};
const onConfirm = () => {
    show.value = false;
};


// 点击登录按钮跳转到home页面
const goHome = async () => {
    try {
        await getUserLoginInfo({ username: username.value, password: password.value })
        router.push('/me')
    } catch (error) {
        return Promise.reject(error)
    }
}

const onClickLeft = () => history.back();
const onClickRight = () => showToast('按钮');
const onSubmit = (values) => {
    console.log('submit', values);
};


</script>

<style lang="less" scoped >
a {
    text-decoration: none;
}

.nav {
    h1 {
        margin: 25px;
        font-size: 24px;
        font-weight: 500;
    }

    .van-hairline--bottom:after {
        border-bottom-width: 0;
    }

    --van-nav-bar-arrow-size: 20px;
    --van-nav-bar-icon-color: black;
    --van-nav-bar-text-color: #a9a9a9;
}

.form {
    .d1 {
        font-size: 10px;
        color: #a9a9a9;
    }

    .van-checkbox {
        margin-left: 15px;
        margin-right: 5px;
    }

    a {
        color: #1989fa;

    }

    .lgbtn {
        margin: 30px 30px 10px 30px;
    }

}

.s1 {
    .left {
        display: inline-block;
        // float: left;
        margin-left: 30px;
        margin-top: 10px;

        a {
            color: #1989fa;
        }
    }

    .right {
        display: block;
        float: right;
        margin-right: 30px;
        margin-top: 10px;

        a {
            color: #1989fa;

        }
    }
}

.van-nav-bar__right {
    font-size: 14px;
}

.bottom-center {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

    a {
        color: #a9a9a9;
    }
}
</style>
